import React,{useState,useRef, memo} from 'react'

export default function App3() {
    const [value,setValue] = useState('asd')
    const element = useRef(null)

    const clickfn=()=>{
        alert(value)
    }
    return (
    <div>
       <h3>受控组件</h3>
        <input type="text" value={value} onChange={(e)=>setValue(e.target.value)} />
        <button onClick={clickfn}>获取input的值</button>
        <hr />
        <h3>不受控组件</h3>
        <input type="text" ref={element}/>
        <button onClick={()=>alert(element.current.value)}>获取input的值</button>
    </div>
  )
}
// 受控组件和不受控组件 只存在表单元素
// 所谓的受控组件就是表单元素的value需要通过state或者useState来定义


// ***hook  memo()  useCallBack()

// const Child = memo(()=>{
    
// })
// setNum(newValue) 使用新值覆盖旧值
// setNum((num)=>num+1) 不断使用新值覆盖旧值